<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="../js/jquery-3.1.1.js"></script>
		<!--<![endif]-->
		<script type="text/javascript">
			function funfirst() {
				$("#div1 p").first().css("background-color", "yellow");
			}

			function funlast() {
				$("#div1 p").last().css("background-color", "yellow");
			}

			function funeq(n) {
				$("#div1 p").eq(n).css("background-color", "yellow");
			}

			function funfilter(n) {
				$("#div2 p").filter('.p2').css("background-color", "yellow");
			}

			function funnot(n) {
				$("#div2 p").not('.pp').css("background-color", "yellow");
			}

			function funget(n) {
				x = $("#div7 p").get(n);
				$(x).css("background-color", "yellow");
			}

			function funparent(t) {
				$("#div3 #d3p1").parent().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funchildren() {
				$("#d3d3 ").children().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funclosest() {
				$("#div4 span").closest("ul").css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funcontents() {
				$("#div4").contents().filter("div").css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funeach() {
				$("#div4 #d4d2").children().each(function() {
					$(this).css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			}

			function funfindeach() {
				$("#div4 #d4d2").find("*").each(function() {
					$(this).css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			}

			function funsiblings() {
				$("#div5 h2").siblings().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funnext() {
				$("#div5 h2").next().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funnextAll() {
				$("#div5 h2").nextAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funnextUntil() {
				$("#div5 h2").nextUntil("h6").css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funprev() {
				$("#div5 h2").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funprevAll() {
				$("#div5 h2").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funprevUntil() {
				$("#div5 h5").prevUntil("h2").css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funhas() {
				$("#div6 p").has("span").css({
					"color": "red",
					"border": "2px solid red"
				});
			}

			function funslice() {
				//注意：如果是负数，则指示从被选元素的末端开始选取元素，而不是从头开始。
				$("#div7 p").slice(2, 3).css("background-color", "yellow");
			}
		</script>
		<style type="text/css">
			div {
				border: 1px solid black;
				margin-top: 8px;
			}
			
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			
			.descendants * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<h2>dom的 first last eq </h2>
			<p id=d1p1>这是一个段落。</p>
			<p id=d1p2>这是一个段落。</p>
			<p id=d1p3>这是另一个段落。</p>
			<button onclick="funfirst()">get first</button>
			<button onclick="funlast()">get last</button>
			<button onclick="funeq(0)">get n</button>
		</div>

		<div id="div2">
			<h2>dom的 first last eq </h2>
			<p class="pp">这是一个段落。</p>
			<p class="p2">这是一个段落。</p>
			<p class="p3">这是另一个段落。</p>
			<button onclick="funfilter()">get filter</button>
			<button onclick="funnot()">get not</button>

		</div>
		<div id="div3">
			<h2>dom的 child parent brother </h2>
			<div>
				<p id="d3p1">这是一个段落。</p>
			</div>
			<div id="d3d2">
				<p id="d3dp1" class="p2">这是一个段落。</p>
				<p id="d3dp2" class="p2">这是一个段落。</p>
				<p id="d3dp3" class="p2">这是一个段落。</p>
				<div id="d3d2d1">
					<p id="d3d2d1p3" class="p3">这是另一个段落。</p>
				</div>

				<div id="d3d3" class="descendants" style="width:500px;">div (当前元素)
					<p>p (儿子元素)
						<span>span (孙子元素)</span>
					</p>
					<p>p (儿子元素)
						<span>span (孙子元素)</span>
					</p>
				</div>
			</div>
			<button onclick="funparent($(this))">get parent</button>
			<button onclick="funchildren()">get children</button>

		</div>

		<div id="div4">
			<h2>dom的  closest()  </h2>
			<div>
				<p id="d4p1">这是一个段落。</p>
			</div>
			<div id="d4d2" class="ancestors">
				<div style="width:500px;">div (曾祖先节点)
					<ul>ul (第二祖先 - 第二祖先节点)
						<ul>ul (第一祖先 - 第一祖先节点)
							<li>li (直接父节点)
								<span>span</span>
							</li>
						</ul>
					</ul>
				</div>
			</div>
			<em>Hello world! What a beautiful day!</em>
			<button onclick="funclosest()">get closest</button>
			<button onclick="funcontents()">get contents</button>
			<button onclick="funfindeach()">get find each</button>

		</div>

		<div id="div5">
			<div class="descendants">div (父元素)
				<p>p</p>
				<span>span</span>
				<h2>h2</h2>
				<h3>h3</h3>
				<h4>h4</h4>
				<h5>h5</h5>
				<h6>h6</h6>
				<p>p</p>
			</div>

			<button onclick="funsiblings()">get siblings</button>
			<button onclick="funnext()">get next</button>
			<button onclick="funnextAll()">get nextAll</button>
			<button onclick="funnextUntil()">get nextUntil</button>
			<button onclick="funprev()">get prev</button>
			<button onclick="funprevAll()">get prevAll</button>
			<button onclick="funprevUntil()">get prevUntil</button>

		</div>

		<div id="div6">
			<h1>欢迎来到我的主页</h1>
			<p>我的<span>名字</span>叫 Donald。</p>
			<p>我住在<span>Duckburg</span>。</p>
			<p>我最好的朋友是 Mickey。</p>
			<button onclick="funhas()">get has</button>
		</div>

		<div id="div7">
			<h1>欢迎来到我的主页</h1>
			<p>我的名字是 Donald (下标 0)。</p>
			<p>Donald Duck (下标 1)。</p>
			<p>我住在 Duckburg (下标index 2)。</p>
			<p>我最好的朋友是 Mickey (下标 3)。</p>
			<div>在这个例子中,我从索引位置2的p元素开始选择p元素的。从这开始所有p元素都将被选中。请注意,该下标数字从0开始。</div>

			<button onclick="funslice()">get slice</button>
			<button onclick="funget(3)">get </button>
		</div>
	</body>

</html>